今天預計開始實作 To-Do List 的功能，先顯示待辦事項的行為並且串接 Restful API，模擬實際專案的情形。

To-Do List 需求

在開發 To-Do List 的案例之前，先來說明 To-Do List 有哪些功能？

• 顯示待辦事項清單
• 新增待辦事項
  • 在輸入框裡按下 Enter，要清空輸入框內容並送出待辦事項
• 修改待辦事項清單
  • 點擊待辦事項，能夠切換『已完成』和『未完成』狀態
• 刪除待辦事項
  • 點擊待辦事項右邊的 delete 按鈕，即可刪除待辦事項
• 顯示未完成事項的數量

To-Do List API

整理 To-Do List 需要哪些 API 如下：

• 取得待辦事項清單（GET）
  • http://localhost:3000/todolist
• 新增待辦事項（POST）
  • http://localhost:3000/todolist/${id}
• 修改待辦事項（PUT）
  • http://localhost:3000/todolist/${id}
• 刪除待辦事項（DELETE）
  • http://localhost:3000/todolist/${id}

如何實作？

我們今天要實作的需求，如下

• 利用立即函式，避免全域變數污染
• 抓取會用到的 DOM 物件
• 建立 render 函式
• 透過 AJAX 抓取後端資料，並 render

新增立即函式

建立一個 main.js，/*code*/ 裡面放 To-Do List 的邏輯，這邊用純 js 的方式用來實現本範例的功能以及對應的行為。

(function () {
	/* code */
}())

傳入 window 和 document

(function (window, document) {
	/* code */
}(window, document))

抓取會用到的 DOM 物件

const todoListDOM = document.getElementById('todoList');

因為 ... 所以這裡只用到了 ul(#todoList)

建立 render 函式

我們預期 todoList 的資料會長像這樣

[
    {
         "isComplete": false,
         "desc": "..."
    },
    ...
]

那我可以建立 render 的函式，會接收 todoList 陣列，並轉呈 HTML 塞到 ul(#todoList)

    function renderTodoList(todoList) {
        const html = todoList.map((item, index) => `<li class="list">
                <a class="${item.isComplete ? 'finish' : 'unfinish'}" data-id=${item.id}></a>
                <p class="desc" data-id=${item.id}>
                    ${item.desc}
                </p>
                <a class="del" data-id=${item.id}></a>
            </li>`).join('')
        todoListDOM.innerHTML = html;
    }

透過 AJAX 抓取後端資料，並 render

接著在 main.js 裡，fetch API，取得待辦事項清單:

    let todoList = [];

    // 取得待辦事項清單（GET）
    fetch('http://localhost:3000/todolist')
    .then(res => res.json())
    .then(json => {
        todoList = todoList.concat(json);
        renderTodoList(todoList); // render todoList
    })
    .catch(err => {
        console.log(err);
    })  

拿到待辦事項資料之後，再抓取 todoList 的 DOM，將資料塞入 list 裡面。

Service Worker 搭配 Restful API 結果

透過 Service Workers，在網站離線的情況下，也可以順利顯示 API 的資料：

今日小結

一開始先列出 To-Do List 顯示/新增/刪除/修改待辦事項的需求，今天完成『顯示待辦事項』的部分，主要是抓取 Restful API 的資料去呈現待辦事項的內容，最後藉由 Service Worker 完成離線瀏覽網站的功能。

本人小小筆記，如有錯誤或需要改進的部分，歡迎給予回饋。
我將會用最快的速度修正，m(_ _)m。謝謝